<template>
  <view class="container">
	  <custom-status-bar></custom-status-bar>
	  
	  
    <!-- 顶部导航 -->
    <view class="header">
      <view class="back-icon" @click="goBack">
        <uni-icons type="left" size="20" color="#1890ff"></uni-icons>
        <text>返回</text>
      </view>
      <text class="title">个人资料</text>
    </view>

    <!-- 蓝色横条 -->
    <view class="blue-bar"></view>

    <!-- 个人信息卡片 -->
    <view class="info-card">
      <!-- 头像 -->
   <!--   <view class="avatar-container">
        <image :src="avatar" class="avatar" @click="chooseAvatar" />
      </view> -->

      <!-- 用户信息 -->
      <view class="info-list">
		  <view class="info-item">
		    <text>头像</text>
		      <image :src="avatar" class="avatar" @click="chooseAvatar" />
		  </view>
		  
		  
        <view class="info-item">
          <text>用户id</text>
          <text>{{ user.userId }}</text>
        </view>
        <view class="info-item">
          <text>手机号</text>
          <text>{{ user.phone }}</text>
        </view>
        <view class="info-item">
          <text>昵称</text>
          <text>{{ user.nickName }}</text>
        </view>
        <view class="info-item">
          <text>简介</text>
          <view class="introduction">{{ brief }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref,reactive,computed } from 'vue';
import CustomStatusBar from '../../components/common/CustomStatusBar.vue';
import {accountInfo} from "@/api/index.js"
import{onLoad} from "@dcloudio/uni-app"

// 模拟用户数据
// const avatar = ref('/static/avatar.jpg');
// const userId = ref('coffe1651224516857');
// const phone = ref('15219209758');
// const nickname = ref('康刘勇');
// const introduction = ref('2022与你相约在粤嵌，爱你呦么么哒');

const user=reactive({
desc:'',
nickName:'',
phone:'',
userId:'',
userImg:'',
vip:0
})

const avatar = computed(() => {
  return user.userImg ? 'https://placehold.net/avatar.png':user.userImg;
});


const brief = computed(() => {
  return user.desc ? user.desc : '这家伙真懒,什么都没留下';
});



onLoad(async()=>{
	 const res = await accountInfo(uni.getStorageSync('coffee_token'))
	 console.log("资料：",res)
	 if(res.code==='B001'){
		  user.desc=res.result[0].desc
		  user.nickName=res.result[0].nickName
		  user.phone=res.result[0].phone
		  user.userId=res.result[0].userId
		  user.userImg=res.result[0].userImg
		  user.vip=res.result[0].vip

	 }
})


// 选择头像
const chooseAvatar = () => {
  uni.chooseImage({
    count: 1,
    success: (res) => {
      avatar.value = res.tempFilePaths[0];
    }
  });
};


// 返回上一页
const goBack = () => {
	const pages = getCurrentPages();
	if (pages.length > 1) uni.navigateBack();
		else  uni.switchTab({ url: '/pages/index/index' });
};

</script>

<style scoped>
.container {
	padding: 0 20rpx 150rpx 20rpx;
}

.header {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100rpx;
	border-bottom: 1rpx solid #eee;
}

.back-icon {
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	font-size: 28rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
}

.blue-bar {
  height: 80rpx;
  background: #1890ff;
  margin-top: 20rpx;
}

.info-card {
  background: white;
  border-radius: 12rpx;
  padding: 20rpx;
  margin-top: -60rpx;
  position: relative;
}

.avatar-container {
  display: flex;
  justify-content: end;
  margin-bottom: 20rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 4rpx solid white;
  box-shadow: 0 0 20rpx rgba(0,0,0,0.1);
}

.info-list {
  margin-top: 20rpx;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 20rpx;
  border-bottom: 1px solid #eee;
}

.info-item text:first-child {
  color: #666;
}

.introduction {
  color: #666;
  line-height: 1.6;
  margin-top: 10rpx;
}
</style>